.wrapper {
  border-radius: 8px;
  height: 48px;
  min-height: 48px;
  flex-grow: 1;
  overflow: hidden;

  display: flex;
  justify-content: flex-end;

  .guides {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 0 12px;
    height: 100%;
  }

  .exploreItem {
    margin-right: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: transform 0.1s linear;

    &:hover {
      transform: translateY(-1px) !important;
    }

    &:focus,
    &:hover {
      text-decoration: underline;
    }
  }

  .guideItem {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    margin-right: 6px;
    height: 32px;
    border-radius: 20px;
    border: 1px solid var(--euiColorSecondary);

    cursor: pointer;
    text-decoration: none;

    &:focus,
    &:hover {
      text-decoration: underline;
    }

    &:nth-child(1) { .guideIcon { color: #FFAF2B; }}
    &:nth-child(2) { .guideIcon { color: #4FDAE0; }}
    &:nth-child(3) { .guideIcon { color: #F74B57; }}
    &:nth-child(4) { .guideIcon { color: #9E7EE8; }}
    &:nth-child(5) { .guideIcon { color: #5BC69B; }}

    .guideIcon {
      margin-right: 4px;
    }
  }
}

@include global.welcome-page-header(650px) {
  .guideItem:nth-child(3) {
    display: none;
  }
}

@include global.welcome-page-header(850px) {
  .guideItem:nth-child(4) {
    display: none;
  }
}
